// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results.  The developer
// should ensure that stable state ids are set for stateful components in real apps.    
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// create the Data Store
var store = new Ext.data.JsonStore( {
	root : 'list',
	totalProperty : 'totalCount',
	idProperty : 'id',
	remoteSort : false,

	fields : [ 'id', 'lastName', 'firstName', 'isDelete' ],

	// load using script tags for cross domain, if the data in on the same
	// domain as
	// this page, an HttpProxy would be better
	proxy : new Ext.data.HttpProxy( {
		url : 'person!jsonList.action'
	// url: 'http://www.extjs.com/forum/topics-browse-remote.php'
			})
});
store.setDefaultSort('id', 'desc');

// pluggable renders
function renderTopic(value, p, record) {
	return String
			.format(
					'<b><a href="http://www.extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://www.extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
					value, record.data.forumtitle, record.id,
					record.data.forumid);
}
function renderLast(value, p, r) {
	return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'),
			r.data['lastposter']);
}

var grid = new Ext.grid.GridPanel( {
	width : 700,
	height : 500,
	title : 'bookbankonline - Browse Persons',
	store : store,
	trackMouseOver : false,
	disableSelection : true,
	stateful : true,// not work?
	loadMask : true,

	// grid columns
	columns : [ {
		id : 'id', // id assigned so we can apply custom css (e.g.
					// .x-grid-col-topic b { color:#333 })
		header : "id",
		dataIndex : 'id',
		width : 420,
		// renderer: renderTopic,
		sortable : true
	}, {
		header : "lastName",
		dataIndex : 'lastName',
		width : 100,
		hidden : false,
		sortable : true
	}, {
		header : "firstName",
		dataIndex : 'firstName',
		width : 70,
		align : 'right',
		sortable : true
	}, {
		id : 'firstName',
		header : "firstName",
		dataIndex : 'firstName',
		width : 150,
		// renderer: renderLast,
		sortable : true
	} ],

	// customize view config
	viewConfig : {
		forceFit : true,
		enableRowBody : true,
		showPreview : true,
		getRowClass : function(record, rowIndex, p, store) {
			if (this.showPreview) {
				p.body = '<p>' + record.data.excerpt + '</p>';
				return 'x-grid3-row-expanded';
			}
			return 'x-grid3-row-collapsed';
		}
	},

	// paging bar on the bottom
	bbar : new Ext.PagingToolbar( {
		pageSize : 10,
		store : store,
		displayInfo : true,
		displayMsg : 'Displaying topics {0} - {1} of {2}',
		emptyMsg : "No topics to display",
		items : [ '-', {
			pressed : true,
			enableToggle : true,
			text : 'Show Preview',
			cls : 'x-btn-text-icon details',
			toggleHandler : function(btn, pressed) {
				var view = grid.getView();
				view.showPreview = pressed;
				view.refresh();
			}
		} ]
	})
});

// render it
grid.render('topic-grid');

// trigger the data store load
store.load( {
	params : {
		start : 0,
		limit : 10
	}
});
